<template>
  <div class="login_container">
    <el-row class="logo">
      <el-col :span="4">
        <el-avatar size="default" src="/logo.png"></el-avatar>
        <el-text class="logo-title">喵喵甄选</el-text>
      </el-col>
      <el-col :span="20">
        <el-form
          class="login_form"
          @keyup.enter="login"
          :model="loginFormUser"
          :rules="rules"
          ref="loginFormE"
          label-width="50px"
          label-position="top"
        >
          <div v-if="!isExistToken" class="account_form_container">
            <h1>Hello &nbsp;&nbsp;˶╹ꇴ╹˶！</h1>
            <h2>喵喵甄选,开启全新体验~</h2>
            <el-form-item prop="username" label="用户名">
              <el-input
                class="input"
                :prefix-icon="User"
                placeholder="请输入用户名/手机号/邮箱"
                v-model="loginFormUser.username"
              />
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                class="input"
                :prefix-icon="Lock"
                :show-password="true"
                placeholder="请输入密码"
                type="password"
                v-model="loginFormUser.password"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox class="checkbox" v-model="isCheck" size="large">
                <el-text>同意</el-text>
                <el-link type="primary" href="https://www.baidu.com"> 喵喵甄选账号服务条款</el-link>
                <el-text>、</el-text>
                <el-link type="primary" href="https://www.baidu.com"> 喵喵甄选服务条款</el-link>
                <el-text> 和</el-text>
                <el-link type="primary" href="https://www.baidu.com"> 隐私政策</el-link>
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login_btn"
                type="primary"
                size="default"
                @click="login"
                :loading="isLoading"
                >登 录
              </el-button>
            </el-form-item>
          </div>
          <!--存在token时显示-->
          <div v-if="isExistToken" class="qrcode-form_container">
            <el-form-item>
              <el-text class="user_text" style="font-size: 30px" size="large"> 扫码登录</el-text>
            </el-form-item>
            <el-form-item>
              <el-avatar
                @click="login"
                style="cursor: pointer; margin-top: 20px"
                :size="100"
                :src="sysToken?.avatar ?? '/'"
              />
            </el-form-item>
            <el-form-item>
              <el-text style="font-size: 20px; color: #333" size="large">
                {{ sysToken?.username ?? null }}
              </el-text>
            </el-form-item>
            <el-form-item>
              <el-link style="font-size: 14px; color: #02a7e8" size="large" @click="changeAccount">
                切换其他账号
              </el-link>
            </el-form-item>
            <el-form-item>
              <el-text style="margin-top: 20px; font-size: 15px; color: #b9bfdf" size="large">
                点击头像跳转登录
              </el-text>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { userStore } from '@/stores/userStore.ts'
import { useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'
import { useTokenStore } from '@/stores/useTokenStore.ts'
import type { FormRules } from 'element-plus'
import type { loginDataForm } from '@/api/auth/type.ts'
import { getTimeDuration } from '@/utils/time.ts'

//编程式路由
const router = useRouter()
//登录加载状态
const isLoading = ref(false)
const isCheck = ref(false)
//form组件
const loginFormE = ref()
//true表示当前token存在
const isExistToken = useTokenStore().isExist()
const sysToken = isExistToken ? useTokenStore().sys_token : null
//表单数据收集
const loginFormUser = reactive({
  username: '',
  password: '',
})

const rules = reactive<FormRules<loginDataForm>>({
  username: [
    {
      required: true,
      message: '用户名不可为空',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 10,
      message: '用户名长度在 3 到 10 个字符',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不可为空',
      trigger: 'blur',
    },
    {
      min: 6,
      max: 10,
      message: '密码长度在 6 到 10 个字符',
      trigger: 'change',
    },
  ],
})

function changeAccount() {
  useTokenStore().removeToken()
  router.go(0)
}

async function login() {
  isLoading.value = true
  //如果token存在则直接跳转
  if (isExistToken) {
    //跳转到主页
    await router.push('/')
    //解除按钮加载状态
    isLoading.value = false
    ElNotification({
      title: `Hi,${getTimeDuration()}`,
      message: `${sysToken?.username ?? null}`,
      type: 'success',
    })
    return
  }

  //表单校验
  await loginFormE.value.validate((valid: unknown) => {
    //校验成功发起请求
    if (valid) {
      if (!isCheck.value) {
        ElMessage.error('请先同意服务条款')
        isLoading.value = false
        return
      }
      //登录
      userStore()
        .login(loginFormUser)
        .then((res) => {
          //存储token
          useTokenStore().setToken(res.data)
          //跳转到主页
          router.push('/')
          //解除按钮加载状态
          isLoading.value = false
          ElNotification({
            title: `Hi,${getTimeDuration()}`,
            message: ` ${loginFormUser.username}`,
            type: 'success',
          })
        })
        .catch(() => {
          //解除按钮加载状态
          isLoading.value = false
        })
    } else {
      //解除按钮加载状态
      isLoading.value = false
    }
  })
}
</script>

<style scoped lang="scss">
.logo_image {
  position: relative;
  top: 1vh;
  left: 1vh;
}

.login_container {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login_background.png') no-repeat;
  background-size: cover;

  //logo
  .logo {
    position: relative;
    top: 20px;

    .logo-title {
      position: relative;
      margin-left: 10px;
      top: -12px;
      font-size: 20px;
      color: #fff;
      line-height: 20px;
    }
  }

  //登录表单
  .login_form {
    position: relative;
    padding: 20px;
    width: 400px;
    height: 480px;
    top: 20vh;
    left: 25vw;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: $base-border-shadow;

    //账号密码登录
    .account_form_container {
      margin-top: 30px;
      /* 修改所有 el-form-item 的 label 样式 */
      :deep(.el-form-item__label) {
        position: relative;
        bottom: -10px;
        color: #101010;
        font-size: 15px;
        font-weight: normal;
        padding-bottom: 8px;
      }

      h1 {
        font-size: 40px;
        color: #101010;
        font-weight: bold;
      }

      h2 {
        margin: 10px 0;
        font-size: 20px;
        color: #a5a0a0;
      }

      .input {
        font-size: 18px;
      }

      .checkbox {
        .el-text {
          font-size: 14px;
        }

        .el-link {
          &.el-link--primary {
            position: relative;
            top: -2px;
          }
        }
      }

      .login_btn {
        width: 100%;
        font-size: 21px;
        font-weight: normal;
      }
    }

    //扫码登录
    .qrcode-form_container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
    }
  }
}
</style>
